<!DOCTYPE html>
<title>Tests mouse interactions on a non-custom composited div scrollbar.</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<script src="../../../resources/scrollbar-util.js"></script>
<style>
.appearance {
  width: 100px;
  height: 100px;
  overflow: scroll;
  border: 1px solid black;
}
.standardLocation {
  position: absolute;
  top: 100px;
  left: 100px;
}
.space {
  height: 1000px;
  width: 1000px;
}
</style>

<div id="root" class="space"></div>
<div id="standard" class="appearance standardLocation">
  <div class="space"></div>
</div>

<script>
window.onload = () => {
  const standardDivFast = document.getElementById("standard");
  const standardRectFast = standardDivFast.getBoundingClientRect();

  const TRACK_WIDTH = calculateScrollbarThickness();
  const BUTTON_WIDTH = TRACK_WIDTH;
  const SCROLL_CORNER = TRACK_WIDTH;
  const SCROLL_DELTA = 50;

  promise_test (async () => {

    await waitForCompositorCommit();
    resetScrollOffset(standardDivFast);

    // Click on the forward arrow of the div scroller and expect that the root scroller
    // should not scroll.
    let x = standardRectFast.right - BUTTON_WIDTH / 2;
    let y = standardRectFast.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;
    const max_div_offset = 915;
    standardDivFast.scrollTop = max_div_offset;
    await mouseClickOn(x, y);
    await conditionHolds(() => { return standardDivFast.scrollTop == max_div_offset; }, "Not expected to scroll because already at max offset.");
    await conditionHolds(() => { return window.scrollY == 0; }, "Root should scroll when a div (at max offset) is scrolled.");
  }, "Test that scroll chaining doesn't happen for scrollbar interactions.");
}
</script>
